const path = require('path')
const HtmlwebpackPlugin = require('html-webpack-plugin')
// const cleanPlugin = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const speedMeasurePlugin = require('speed-measure-webpack-plugin')
const autoprefixer = require('autoprefixer')
const smp = new speedMeasurePlugin()
const terserPlugin = require('terser-webpack-plugin')
const cssMinimizerPlugin = require('css-minimizer-webpack-plugin')
console.log('node环境变量', process.env.MY_ENV)

let config = {
  entry: './src/index.js', // 入口文件
  context: process.cwd(), // 上下文目录
  mode: 'development', // 开发模式
  output: {
    path: path.resolve(__dirname, 'dist'),  // 输出目录
    filename: 'js/chunk-[contenthash].js', // 文件名
    clean: true
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'), // devServer静态文件根目录
    port: 8888,
    open: true, // 在服务器启动时打开
    hot: true, // 启动模块热替换
    // 用来配置路由
    // before(router) {
    //   router.get('/success', function (req, res) {
    //     res.json({ id: 1 })
    //   })
    //   router.post('/error', function (req, res) {
    //     res.sendStatus(500)
    //   })
    // }
  },
  module: {
    rules: [{
      test: /\.(css|s[cs]ss)$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader'
      ]
    }]
  },
  optimization: {
    minimize: true,
    minimizer: [new cssMinimizerPlugin()]
  },
  devtool: 'source-map',
  // 配置性能提示
  performance: {
    hints: 'warning', // 提示信息类型  error、warning、false
    maxEntrypointSize: 1000 // 入口文件的最大体积
    // maxAssetSize: 1000 // 打包资源的最大体积
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "static/css/[name].[contenthash:8].css",
      chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
    }),
    // 使用postcss最重要的功能就是提供CSS样式浏览器厂商前缀，通过 autoprefixer 完成， 也可以用 postcss-preset-env
    // 在旧版的一些浏览器里，flex等属性需要添加-webkit-前缀才能使用
    // 首先安装 postcss-loader 或者 autoprefixer ，再通过 autoprefixer 配置
    // autoprefixer({
    //   browsers: [
    //     'chrome >= 18'
    //   ]
    // }),
    // 清除之前打包生成的文件
    // new cleanPlugin(),
    // 配置打包模块里的环境
    // new webpack.DefinePlugin({
    //   MY_ENV: 'dev'
    // }),
    // 压缩JS代码
    new terserPlugin(),
    // 生成的HTML文件配置
    new HtmlwebpackPlugin({ // 自动打包出HTML文件的
      // minify: true, // 压缩打包后的HTML文件
      template: './src/index.html', // 根据所指的HTML文件生成最终的HTML文件
      inject: 'head', // 将打包生成的JS文件引入到哪个标签上
    }),
    // 监控打包体积
    // new BundleAnalyzerPlugin()
  ]
}

module.exports = smp.wrap(config)